<template>
  <div class="detail_page">
    <ViewScroll class="detail-box">
      <div class="detail">
        <!-- 轮播图  start-->
        <detail-swiper :items="items"></detail-swiper>
        <!-- 轮播图  end-->
        <div class="detail_title">
          <div class="title_top">
            <sup>￥</sup>

            <span class="new_price">{{ items.price }}</span>
            <span class="old_price">￥{{ items.orgPrice }}</span>
          </div>
          <div class="title_middle">
            <span>{{ items.title }}</span>
          </div>
          <div class="title_bottom">
            <span>免运费</span>
          </div>
        </div>
        <hr />
        <div class="detail_preferential">
          <div class="preferential_top">
            <div class="discount">
              <div class="discount_top">
                <div class="discount_one">优惠</div>
                <div class="discount_two">
                  领劵后，下单至少可减
                  <span class="discount_money">3元</span>
                </div>
                <div class="discount_three">
                  领劵
                  <i class="icon iconfont icon-right"></i>
                </div>
              </div>
              <div class="discount_bottom">
                <div class="discount_top">
                  <div class="discount_one"></div>
                  <div class="discount_coupon">
                    <div class="coupon">
                      <span>店铺优惠券</span>
                    </div>
                    <div class="coupon_one">
                      <span>满98减3</span>
                    </div>
                    <div class="coupon_one">
                      <span>满198减10</span>
                    </div>
                  </div>
                  <div class="discount_one"></div>
                </div>
              </div>
            </div>
            <div class="promotion">
              <div class="promotion_one">促销</div>
              <div class="promotion_two">
                <div class="full_discount">满折</div>
                <span>满3件打9.5折，满99件打8.5折</span>
              </div>
              <div class="promotion_three">
                更多
                <i class="icon iconfont icon-right"></i>
              </div>
            </div>
          </div>
          <div class="preferential_bottom"></div>
        </div>
        <div class="service_guarantee">
          <div class="service">
            <div style="width:15px;height:15px">
              <svg
                fill="red"
                x="0px"
                y="0px"
                viewBox="0 0 1000 1000"
                enable-background="new 0 0 1000 1000"
                xml:space="preserve"
              >
                <g>
                  <path
                    d="M500,990C229.4,990,10,770.6,10,500C10,229.4,229.4,10,500,10s490,219.4,490,490C990,770.6,770.6,990,500,990z M788.8,333.8L788.8,333.8c-22.9-22.8-59.9-22.8-82.7,0L439.9,600L294.3,454.4c-22.9-22.9-60.1-22.9-83.1,0v0c-22.9,22.9-22.9,60.1,0,83l171.3,171.4c2.9,6.8,6.9,13.2,12.4,18.7v0c12.3,12.3,28.5,17.4,44.6,16.5c16.1,0.9,32.4-4.3,44.7-16.6v0c5.7-5.7,9.9-12.2,12.8-19.2l291.7-291.7C811.6,393.7,811.6,356.6,788.8,333.8z"
                  />
                </g>
              </svg>
            </div>
            <span>72小时发货</span>
          </div>
          <div class="service">
            <div style="width:15px;height:15px">
              <svg
                fill="red"
                x="0px"
                y="0px"
                viewBox="0 0 1000 1000"
                enable-background="new 0 0 1000 1000"
                xml:space="preserve"
              >
                <g>
                  <path
                    d="M500,990C229.4,990,10,770.6,10,500C10,229.4,229.4,10,500,10s490,219.4,490,490C990,770.6,770.6,990,500,990z M788.8,333.8L788.8,333.8c-22.9-22.8-59.9-22.8-82.7,0L439.9,600L294.3,454.4c-22.9-22.9-60.1-22.9-83.1,0v0c-22.9,22.9-22.9,60.1,0,83l171.3,171.4c2.9,6.8,6.9,13.2,12.4,18.7v0c12.3,12.3,28.5,17.4,44.6,16.5c16.1,0.9,32.4-4.3,44.7-16.6v0c5.7-5.7,9.9-12.2,12.8-19.2l291.7-291.7C811.6,393.7,811.6,356.6,788.8,333.8z"
                  />
                </g>
              </svg>
            </div>
            <span>7天无理由退货</span>
          </div>
          <div class="service">
            <div style="width:15px;height:15px">
              <svg
                fill="red"
                x="0px"
                y="0px"
                viewBox="0 0 1000 1000"
                enable-background="new 0 0 1000 1000"
                xml:space="preserve"
              >
                <g>
                  <path
                    d="M500,990C229.4,990,10,770.6,10,500C10,229.4,229.4,10,500,10s490,219.4,490,490C990,770.6,770.6,990,500,990z M788.8,333.8L788.8,333.8c-22.9-22.8-59.9-22.8-82.7,0L439.9,600L294.3,454.4c-22.9-22.9-60.1-22.9-83.1,0v0c-22.9,22.9-22.9,60.1,0,83l171.3,171.4c2.9,6.8,6.9,13.2,12.4,18.7v0c12.3,12.3,28.5,17.4,44.6,16.5c16.1,0.9,32.4-4.3,44.7-16.6v0c5.7-5.7,9.9-12.2,12.8-19.2l291.7-291.7C811.6,393.7,811.6,356.6,788.8,333.8z"
                  />
                </g>
              </svg>
            </div>
            <span>退货补运费</span>
          </div>
        </div>
        <hr />
        <div class="seller_comments">
          <div class="comments_top">
            <div>卖家评论</div>
            <div>
              更多
              <i class="icon iconfont icon-right"></i>
            </div>
          </div>
          <div class="comments_bottom">
            <div class="comments">全部(333)</div>
            <div class="comments">卖家服务态度很好(333)</div>
            <div class="comments">差评(333)</div>
            <div class="comments">质量很好(333)</div>
          </div>
          <div>
            <components-list :comlist="componentsList"></components-list>
          </div>
        </div>

        <div class="detail_full"></div>
        
      </div>
    </ViewScroll>
    <div class="detail_bottom">
          <div class="detail_one">
            <i class="icon iconfont icon-shop"></i>
            <p>店铺</p>
          </div>
          <div class="detail_one">
            <i class="icon iconfont icon-message"></i>
            <p>客服</p>
          </div>
          <div class="detail_one">
            <i class="icon iconfont icon-like"></i>
            <p>收藏</p>
          </div>
          <div class="detail_cart" @click.capture="showCartData()">
            <span>加入购物车</span>
          </div>
          <div class="detail_buy">
            <span>立即购买</span>
          </div>
        </div>
    <fiexd-menus></fiexd-menus>
  </div>
</template>
<script>
// import Swiper from "../components/Swiper";
import DetailSwiper from "../components/DetailSwiper";
import ComponentsList from "../components/ComponentsList";
import FiexdMenus from "../components/FiexdMenus";
export default {
  data() {
    return {
      fcid: "",
      componentsList: [],
      items: {}
    };
  },
  components: {
    DetailSwiper,
    ComponentsList,
    FiexdMenus
  },
  watch: {
    fcid: function() {
      this.loadDetailData();
    }
  },
  methods: {
    loadDetailData() {
      this.$api
        .loadComponent({
          type: 1,
          itemId: this.fcid,
          appPlat: "m"
        })
        .then(data => {
          // console.log(data);
          this.componentsList = data.list;
        })
        .catch(error => {
          console.error(error);
        });
    },
    showCartData(){
            // this.$showTip('添加成功！');
            this.$store.commit("setCartComments",this.items);
            // console.log(this.items);
            // this.$showTip();
        }
  },
  mounted() {
    // this.loadDetailMsg();

    this.fcid = this.$route.query.link;
    this.items = JSON.parse(localStorage.getItem("items"));
    this.loadDetailData();
  }
};
</script>
<style lang="less" scoped>
.detail_page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rem;
  bottom: 0rem;
  left: 0rem;
  right: 0rem;
  .detail-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
    overflow: hidden;
  }
  .detail {
    width: 100%;
    // height:100%;
    text-align: left;
    position: absolute;
    top: 0px;
    .detail_full {
      width: 100%;
      height: 100px;
    }
    .detail_title {
      width: 90%;
      height: 200px;
      // border: 1px solid red;
      // border-bottom: 5px solid #dedede;
      margin: 0 auto;
      .title_top {
        .new_price {
          font-size: 40px;
        }
        .old_price {
          text-decoration: line-through;
          color: #999;
          padding-left: 20px;
        }
      }
      .title_middle {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-indent: 2em;
      }
      .title_bottom {
        font-size: 16px;
        color: #999;
        padding-top: 10px;
      }
    }
    hr {
      width: 100%;
      height: 20px;
      background-color: #efefef;
      border: none;
      margin: 0px;
    }
    .detail_preferential {
      width: 90%;
      height: 200px;
      margin: 0 auto;
      border-bottom: 1px solid #dedede;

      .discount_top {
        display: flex;
        .discount_one {
          width: 80px;
          height: 50px;
          //  font-size: 30px;
          color: #999;
        }
        .discount_two {
          flex-grow: 1;
        }
        .discount_three {
          width: 100px;
          height: 50px;
          color: #999;
        }

        .discount_coupon {
          flex-grow: 1;
          display: flex;
          justify-content: space-between;
          .coupon {
            width: 170px;
            height: 60px;
            border-radius: 30px;
            // border:1px solid red;
            background-color: #fee6e8;
            color: #f45c7d;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .coupon_one {
            width: 180px;
            height: 60px;
            color: #f45c7d;
            background: radial-gradient(
                  circle at 0 30px,
                  transparent 15px,
                  #fee6e8 6px
                )
                top left,
              linear-gradient(0.25turn, #fee6e8),
              radial-gradient(
                  circle at 18px 30px,
                  transparent 15px,
                  #fee6e8 16px
                )
                bottom right;
            background-size: 17px 100px, 150px 100px, 17px 100px;
            background-repeat: no-repeat;
            background-position: 10px 0px, 20px 0px, 170px 0px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .discount_money {
          color: #f34b70;
        }
      }
      .promotion {
        padding-top: 30px;
        display: flex;
        // justify-content: center;
        // align-items: center;
        .promotion_one {
          width: 80px;
          height: 50px;
          color: #999;
        }
        .promotion_two {
          flex-grow: 1;
          display: flex;
          height: 50px;
          .full_discount {
            width: 80px;
            height: 50px;
            border-radius: 25px;
            // border: 1px solid red;
            background-color: #fee6e8;
            color: #f34b70;
            text-align: center;
            line-height: 50px;
            margin-right: 20px;
          }
          span {
            line-height: 50px;
          }
        }
        .promotion_three {
          width: 100px;
          height: 50px;
          color: #999;
        }
      }
    }
    .service_guarantee {
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      padding: 25px 0px;
      .service {
        display: flex;
        align-items: center;
        span {
          padding-left: 10px;
        }
      }
    }
    .seller_comments {
      width: 90%;
      margin: 0 auto;
      .comments_top {
        display: flex;
        justify-content: space-between;
        padding: 20px 0px;
        color: #999;
      }
      .comments_bottom {
        width: 100%;
        // margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .comments {
          width: fit-content;
          width: -webkit-fit-content;
          width: -moz-fit-content;
          background-color: #fee6e8;
          color: #f45c7d;
        }
      }
    }
  }
}
.detail_bottom{
        position: fixed;
        width: 100vw;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        bottom:0px;
        z-index: 99;
        background-color: #ffffff;
        border-top: 1px solid #dedede;
        text-align: center;
        color:#000;

       .detail_one{
           width:100px;
           height:100%;
           .iconfont{
               font-size: 40px;
           }

        //    border:1px solid red;
       }
       .detail_cart{
           width:250px;
           height:100%;
           background-color: #fee6e8;
           color:#f45c7d;
           
           display: flex;
           align-items: center;
           justify-content: center;
       }
       .detail_buy{
           flex-grow: 1;
           height:100%;
           background-color:#f45c7d;
           color:white; 
          
           display: flex;
           align-items: center;
           justify-content: center;
       }
        
    }

</style>